<template>
  <div>
    <el-row>
      <el-col :span="3">
        <el-button type="primary" @click="dialogFormVisible = true">修改密码</el-button>
      </el-col>
      <el-col :span="21" align="left">
        <el-button type="primary" @click="getUserInfo">修改其他信息</el-button>
      </el-col>
    </el-row>

    <!-- 修改密码对话框 -->
    <el-dialog
      :title="titlePassword"
      :visible.sync="dialogFormVisible"
      @close="clearForm"
    >
      <el-form ref="activityFormRef" :model="form">
        <el-form-item label="请输入原密码:" :label-width="formLabelWidth">
          <el-input type="password" v-model="form.oldPassword" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="请输入新密码" :label-width="formLabelWidth">
          <el-input type="password" v-model="form.newPassword" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="请确认新密码" :label-width="formLabelWidth">
          <el-input type="password" v-model="form.againPassword" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatePassword">确 定</el-button>
      </div>
    </el-dialog>

    <!--修改其他用户信息-->
    <el-dialog
      :title="titleUserInfo"
      :visible.sync="editUserInfo"
      @close="clearForm"
    >
      <el-form ref="activityFormRef" :model="formUser">
        <el-form-item label="请输入姓名:" :label-width="formLabelWidth">
          <el-input type="test" v-model="formUser.username" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="请输入手机号" :label-width="formLabelWidth">
          <el-input type="test" v-model="formUser.phone" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="请输入邮箱" :label-width="formLabelWidth">
          <el-input type="test" v-model="formUser.email" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveUserInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import userManageApi from "@/api/userManage";

export default {
  data() {
    return {
      formLabelWidth: '100px',
      form: {
        oldPassword: '',
        newPassword: '',
        againPassword: ''
      },
      dialogFormVisible: false,
      titlePassword: '修改密码',
      editUserInfo: false,
      titleUserInfo: '修改用户其他信息',
      formUser: {
        id: '',
        username: '',
        email: '',
        phone: '',
      }
    }
  },
  methods: {
    clearForm() {
      this.form = {}
      this.$refs.activityFormRef.clearValidate()
      this.formUser = {}
    },
    updatePassword() {
      userManageApi.updatePassword(this.form).then(response => {
        const code = response.code
        console.log(code)
        if (code == 20000) {
          this.$message({
            message: response.message,
            type: "success",
          });
          this.dialogFormVisible = false;
        } else {
          this.$message({
            message: response.message,
            type: "warning",
          });
        }
      })
    },
    getUserInfo () {
      userManageApi.getUserInfo().then(resp=>{
        this.editUserInfo = true;
        this.formUser = resp.data;

      })
    },
    saveUserInfo() {
      userManageApi.updateUserInfo(this.formUser).then(resp => {
        // 成功提示
        this.$message({
          message: '修改成功',
          type: 'success'
        });

        this.editUserInfo = false;
      })
    }
  }
}
</script>

<style>
#search .el-input {
  width: 200px;
  margin-right: 10px;
}

.el-dialog .el-input {
  width: 85%;
}
</style>
